<template>
	<!-- <div class="login-box">

    <img v-if="VUE_APP_USER == 'wanjie'" style="margin: 0 0 20px 75px" src="@/assets/img/wanjie/logo-white.png" />
    <img v-else style="margin: 0 0 20px 40px" src="@/assets/img/logo.png" />
    <el-form ref="form" :rules="rules" label-position="left" :model="addForm" @keyup.enter.native="submit"
      label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input maxlength="50" v-model="addForm.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input maxlength="50" v-model="addForm.password" placeholder="请输入密码" type="password" />
      </el-form-item>
      <el-form-item label="验证码" prop="captcha_code">
        <el-input maxlength="10" v-model="addForm.captcha_code" placeholder="请输入验证码">
          <div slot="append" class="code-pic">
            <img :src="codePic" alt="" @click="getCode">
          </div>
        </el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="submit" class="none-type">登录</el-button>
      </el-form-item>

    </el-form>
  </div> -->
	<div class="login-container">
		<div class="login-box">
			<!-- <img class="logo" src="~@/assets/img/wise-worker.png" alt=""> -->
			<h1 style="font-size: 48px; letter-spacing: 8px; color: #fff;">智能体训练平台</h1>


			<div class="login-form">
				<el-form
					ref="form"
					:rules="rules"
					label-position="left"
					:model="addForm"
					@keyup.enter.native="submit"
					label-width="70px"
				>
					<el-form-item label="用户名" prop="username">
						<el-input maxlength="50" v-model="addForm.username" placeholder="请输入用户名" />
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input maxlength="50" v-model="addForm.password" placeholder="请输入密码" type="password" />
					</el-form-item>
					<el-form-item label="验证码" prop="captcha_code">
						<div class="code-input">
							<el-input maxlength="10" v-model="addForm.captcha_code" placeholder="请输入验证码"> </el-input>
							<div slot="append" class="code-pic">
								<img :src="codePic" alt="" @click="getCode" />
							</div>
						</div>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" @click="submit">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
import { verificationCode, login ,usersInfo} from "@/api/login";
import { setCookie } from "@/utils/tool";
import { encrypt } from "@/utils/rsaEncrypt";
import {
  getuserRoleDetail,
} from "@/api/orgs";
//import { getuserRoleMenuById } from '@/api/routeAuth'
export default {
	data() {
		return {
			addForm: {},
			codePic: "",
			rules: {
				username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
				password: [{ required: true, message: "请输入密码", trigger: "blur" }],
				captcha_code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
			},
			userLis:[],
			info:[],
			role:''
		};
	},
	async created() {
		this.getCode();
	},
	mounted() {},
	destroyed() {},
	methods: {
	async getUserInfo() {
      let info = await usersInfo()
      this.info = info.data.id
console.log('this.info',this.info)
      
    },
	async getDataId() {
      let res = await getuserRoleDetail({ organizationId: 1 });
      this.userLis = res.data;
	this.role = res.data.find(item => item.user_id === this.info);
	setCookie("roles", this.role.role_id);
    },

		async getCode() {
			let res = await verificationCode();
			this.addForm.captcha_key = res.data.uuid;
			this.codePic = res.data.img;
		},
		submit() {
			let data = {
				client_id: "platform",
				client_secret: encodeURIComponent(encrypt("123456")),
			};
			if (this.navActive == 0) {
				if (!this.formLogin.username) {
					this.$message.error("请输入用户名");
					return false;
				}
				if (!this.formLogin.password) {
					this.$message.error("请输入密码");
					return false;
				}
				if (!this.formLogin.authCode) {
					this.$message.error("请输入验证码");
					return false;
				}
			}

			data.grant_type = "password";
			data.password = encodeURIComponent(encrypt(this.addForm.password));
			data.username = this.addForm.username;
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					let [err, res] = await this.$awaitWrap(
						login({
							...data,
						})
					);
					if (err) {
						this.getCode();
						return;
					}
					console.log("login:", err, res);
					setCookie("login_ticket", `Bearer ${res.data.access_token}`);
					setCookie("refresh_token", res.data.refresh_token);
					Vue.prototype.$indexReload = 1;
					if (this.$isReinforce) {
						this.$router.push("/index-casc?name=index");
					if(this.addForm.username != 'admin'){
						console.log('this.addForm.username',this.addForm.username)
						this.getDataId()
							this.getUserInfo()
						}
					} else {

						this.$router.push("/index-casc?name=index");
						if(this.addForm.username != 'admin'){
							console.log('this.addForm.username',this.addForm.username)
							this.getUserInfo()
							this.getDataId()
							console.log('测试',111)
						}
					}
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
.login-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: url(~@/assets/img/bg-02.png) no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;

	.login-box {
		position: absolute;
		width: 560px;
		height: 450px;
		right: 257px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		img.logo {
			height: 65px;
		}

		.login-form {
			width: 100%;
			height: 353px;
			background: rgba(#83acff, 0.3);
			backdrop-filter: blur(2px);
			padding: 55px 70px;
			box-sizing: border-box;
			border-radius: 8px;
		}
	}
}

.code-input {
	display: flex;
	justify-content: space-between;

	.code-pic {
		margin-left: 10px;

		img {
			display: block;
			height: 38px;
			background: #f7f7f7;
			border-radius: 4px;
		}
	}
}

// .code-pic {
//   img {
//     display: block;
//     height: 36px;
//   }
// }

/deep/ .el-form {
	.el-form-item__content {
		line-height: 20px !important;
	}

	.el-input {
		.el-input__inner {
			background: #192960 !important;
			border: 1px solid #396cbc !important;
		}
	}

	.el-button {
		width: 100%;
	}
}

// .login-box {
//   width: 420px;
//   margin-top: -120px;
//   padding: 30px 60px;
//   border-radius: 12px;
//   /*border: 1px solid #ccc;*/
//   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
// }

// .code-pic {
//   img {
//     display: block;
//     // width: 120px;
//     height: 36px;
//   }
// }
</style>
